// import { useSelector } from "react-redux"
// import { userState } from '@/store/user/types'
import { Outlet } from "react-router-dom"
// import {Router} from "@/routes/routes"
import style from "./index.module.scss"
import LeftBar from "@/laout/leftBar"
import Heder from "@/laout/heder"
import { leftBarType } from "@/laout/leftBar/type"
import React, { useState } from "react"
const Home: React.FC<leftBarType> = () => {
    // const { user } = useSelector((state: { user: userState }) => ({
    //     user: state.user,
    // }))
    const [show, setShow] = useState<boolean>(true)
    const handelChange = (v: boolean) => {
        // debugger
        setShow(v)
    }
    return (
        <div className={style.main}>
            <div className={style.main_herder}>
                <Heder></Heder>
            </div>
            <div className={style.main_contet + " flex"}>
                <div className={style.main_leftBar} style={show ? { width: 256 } : { width: 80 }}>
                    <LeftBar changeLeftBar={handelChange}></LeftBar>
                </div>
                <div className={style.main_vieviw} style={show ? { width: "calc(100vw - 256px)" } : { width: "calc(100vw - 80px)" }}>
                    <div className={style.main_vieviw_box}>
                        <Outlet></Outlet>
                    </div>
                </div>
            </div>

        </div>
    )
}
export default Home